<template>
	<div class="main">
		
		<el-card shadow="never" class="content-card">
			<div slot="header" class="clearfix">
				<el-button type="primary" size="small" @click="dialogFormVisible = true" >新增</el-button>
			</div>
		<!-- 新增模态框 -->
		<el-dialog title="广告详情" :visible.sync="dialogFormVisible" width="800px">
		  <el-form :model="form" :inline="true" :rules="rules" ref="form">
		    <el-form-item label="广告名称" prop="name">
		      <el-input v-model="form.name" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
		    </el-form-item>
			<el-form-item label="备注">
			  <el-input v-model="form.note" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
			</el-form-item>
			<el-form-item label="排序">
			  <el-input v-model="form.name" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
			</el-form-item>
			<el-form-item label="产品数量"  prop="orderCount">
			  <el-input v-model="form.orderCount" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
			</el-form-item>
			<el-form-item label="链接">
			  <el-input v-model="form.url" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
			</el-form-item>
			<el-form-item label="首页轮播位置">
			  <el-input v-model="form.type" autocomplete="off" style="width: 300px; height: 30px;"></el-input>
			</el-form-item>
			<el-form-item label="开始时间">
			  <div class="block">
			   
			    <el-date-picker
				 value-format="yyyy-MM-dd HH:mm:ss"
			      v-model="form.createTime"
			      type="datetime"
			      placeholder="选择日期时间">
			    </el-date-picker>
			  </div>
			</el-form-item>
			<el-form-item label="结束时间">
			 <div class="block">
			  
			   <el-date-picker
			   value-format="yyyy-MM-dd HH:mm:ss"
			     v-model="form.endTime"
			     type="datetime"
			     placeholder="选择日期时间">
			   </el-date-picker>
			 </div>
			</el-form-item>
			<el-form-item label="上下线状态">
			 <el-switch
			   v-model="form.status"
			  active-color="#13ce66"
			      inactive-color="#ff4949"
			   :active-value="1"
			   :inactive-value="0"
			 				>
			 </el-switch>
			</el-form-item>
			<el-form-item label="图片">
			 <el-upload
			 :headers="headers"
			   action="/lejuAdmin/material/uploadFileOss"
			   list-type="picture-card"
			   :on-preview="handlePictureCardPreview"
			   :on-remove="handleRemove"
			   :on-success="shangchuan">
			  <i class="el-icon-plus"></i>
			 </el-upload>
			<!-- <el-dialog :visible.sync="dialogVisible"> -->
			   <img width="100%" :src="form.pic" alt="">
			<!-- </el-dialog> -->
			</el-form-item>
			
		   <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
		      <el-select v-model="form.region" placeholder="请选择活动区域">
		        <el-option label="区域一" value="shanghai"></el-option>
		        <el-option label="区域二" value="beijing"></el-option>
		      </el-select>
		    </el-form-item> -->
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="close">确 定</el-button>
		  </div>
		</el-dialog>
		
		
		
		
		
			<el-table :data="items" border style="width: 100%" >
				<el-table-column fixed type="index" align="center" label="序号"  width="50">
				</el-table-column>
				<el-table-column label="广告图片" width="120" align="center">
					<template slot-scope="scope">
						<img :src="scope.row.pic" alt="" style="width: 80px; height: 80px;">
					</template>
				</el-table-column>
				<el-table-column label="时间" align="center" width="220">
					<template slot-scope="scope">
						<div>开始时间:{{scope.row.createTime}}</div>
						<div>结束时间:{{scope.row.endTime}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="广告名称" align="center" width="150">
				</el-table-column>
		
				
				
				<el-table-column prop="clickCount" label="点击数" align="center" width="80">
				</el-table-column>
				<el-table-column prop="orderCount" label="下单数" align="center" width="100">
				</el-table-column>
				<!-- 不会 -->
				<el-table-column    label="轮播位置" align="center" width="100">
					<template slot-scope="scope">
						<p>{{scope.row.type ==0 ? '首页轮播' : '其他'}}</p>
						</template>
				</el-table-column>
			<el-table-column prop="url" label="链接地址" align="center" width="150">
			</el-table-column>
			<el-table-column prop="note" label="备注" align="center" width="150">
			</el-table-column>
			<el-table-column prop="status" label="上下线状态" align="center" width="100">
				<template slot-scope="scope">
					<p>{{scope.row.status ==0 ? '下线' : '上线'}}</p>
					</template>
			</el-table-column>
				<el-table-column  label="操作" width="150" align="center">
					<template slot-scope="scope">
						<el-button  type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
						<el-button type="danger" size="mini"@click="remove(scope.row)" >删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<!-- <div class="block">
		
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page.currentpage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total">
				</el-pagination>
			</div> -->
		
		
		</el-card>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/myAuth.js"
	import{
		adsList,
		delAds,
		addAds,
		updateAds
	}from "@/api/marketing/advertising/index.js"
	export default{
		data(){
			const token = getToken()
			return{
				headers: {
					token: token
				}, //上川文件的请求头
				rules: {   //表单校验
					name: [{
							required: true,
							message: '请输入广告名称',
							trigger: 'blur'
						},
				
					],
					orderCount: [{
							required: true,
							message: '请输入产品数量',
							trigger: 'blur'
						},
				
					],
				},
				dialogVisible: false,
			
				
				dialogFormVisible: false,
				form:{
					name:"",
					note:"",
					orderCount:0,
					url:"",
					type:"",
					createTime:"",
					endTime:"",
					pic:"",
					status:0
					
					
				},
				id:"",
				forms:{},
				items:[]
			}
		},
		methods:{
			// 上传照片成功后
			shangchuan(val){
				console.log(val)
				this.form.pic = val.data.fileUrl
			},
			//上传照片
			handleRemove(file, fileList) {
			        console.log(file);
					this.$options.data().form.pic
				
			      },
			      handlePictureCardPreview(file) {
					  console.log(file)
			        
			        this.dialogVisible = true;
					console.log( this.dialogImageUrl)
			      },
				  resetForm(formName) {
				         this.$refs.form.resetFields();
				       },
				  // 新增确定按钮
			close(){
				if(this.id){
					
					updateAds(this.forms).then(res=>{  //更新广告
						console.log(res)
						if(res.success){
							this.dialogFormVisible = false
							this.getAdsList()
						}
					})
				}else{
					// 校验
					this.$refs.form.validate((valid) =>{
						console.log(valid)
						if(valid){
							addAds(this.form).then(res=>{
								console.log(res)
								if(res.success){
									this.dialogFormVisible = false
									this.getAdsList()
									
								}else{
									this.$message.error("创建失败,请检查网络设置")
								}
							})
						}else{
							this.$message.error("请填写必要信息")
							return false;
						}
					})
				}
			
				
				
			},
			// 编辑
			edit(val){
				console.log(val)
				this.id = val.id
				if(this.id){
					this.dialogFormVisible = true
					this.form = val
					this.forms = val
					
				}
				
			},
		// // 更新文章
		
		// renew(){
		// 	updateAds(this.forms).then(res=>{  //更新广告
		// 		console.log(res)
		// 	})
		// },
			
			// 删除
			remove(val){
				console.log(val)
				 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				         delAds(val.id).then(res=>{
							 console.log(res)
							 if(res.success){
								 this.$message.success("删除成功")
								this.getAdsList()
							 }else{
								 this.$message.error("删除失败,请检查网络设置")
							 }
						 })
				        })
			},
			// 获取广告列表
			getAdsList(){
				adsList().then(res=>{
					console.log(res)
					this.items = res.data.items
				})
			}
		},
		created() {
			this.getAdsList(),
			console.log(this.value1)
		}
	}
</script>

<style scoped="scoped" lang="scss">
</style>
